<template>
  <div class="app-container">
<!-- 车辆信息  -->
      <div class="item hauto ld">
        <fieldset>
        <legend>车辆信息</legend>
        <div class="fd-content">
            <div class="fd-item">
                <el-table v-loading="listLoading" :data="list" 
                    border fit highlight-current-row stripe 
                    style="width: 100%">
                    <el-table-column align="center" label="序" width="80">
                        <template slot-scope="scope">
                        <span>{{ scope.row._id }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="车牌号码">
                        <template slot-scope="scope">
                        <span>{{ scope.row.licenseplate }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="具体车型">
                        <template slot-scope="scope">
                        <span>{{ scope.row.carname }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="车身颜色">
                        <template slot-scope="scope">
                        <span>{{ scope.row.carcolor }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="本店购买">
                        <template slot-scope="scope">
                        <span>{{ scope.row.buyinshop }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="购车日期">
                        <template slot-scope="scope">
                        <span>{{ scope.row.carname }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="备注">
                        <template slot-scope="scope">
                        <span>{{ scope.row.buydate }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="车主类型">
                        <template slot-scope="scope">
                        <span>{{ scope.row.ownertype }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="联系人">
                        <template slot-scope="scope">
                        <span>{{ scope.row.contacts }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="电话">
                        <template slot-scope="scope">
                        <span>{{ scope.row.contactphone }}</span>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
        </div>
        </fieldset>
      </div>
<!-- end 车辆信息  -->

<!-- 环检信息  -->
      <div class="item hauto ld">
        <fieldset>
        <legend>环检信息</legend>
        <div class="fd-content">
            <div class="fd-item">
                <span class="name">进厂里程</span>
                <span class="value">
                    <el-input v-model="envinfo.mileage"></el-input>
                </span>
                <span class="name">油表状态：</span>
                <span class="value">
                    <el-input v-model="envinfo.oilgauge"></el-input>
                </span>
            </div>
            <div class="fd-item">
                <span class="name">是否洗车：</span>
                <span class="value">
                     <el-switch v-model="envinfo.wash" active-color="#13ce66" inactive-color="#aaaaaa"></el-switch>
                </span>
            </div>
            <div class="fd-item">
                <span class="name">故障现象：</span>
                <span class="value" style="width:100%;">
                    <el-input type="textarea" rows="3" v-model="envinfo.faultdesc"></el-input>
                </span>
            </div>
            <div class="fd-item">
                <span class="name">维修类别：</span>
                <span class="value">
                    <el-input v-model="envinfo.fittype1"></el-input>
                </span>
                <span class="name">维修类型：</span>
                <span class="value">
                    <el-input v-model="envinfo.fittype2"></el-input>
                </span>
            </div>
            <div class="fd-item">
                <span class="name">进厂时间：</span>
                <span class="value">
                     <el-input v-model="envinfo.fitdate"></el-input>
                </span>
                <span class="name">预计交车时间：</span>
                <span class="value">
                    <el-input v-model="envinfo.completedate"></el-input>
                </span>
            </div>
            <div class="fd-item">
                <span class="name">上传图片：</span>
                <span class="value">
                     <bx-image-box :images="envinfo.images" :origin-images="envinfo.originImages" :maxlength="10"></bx-image-box>
                </span>
            </div>
        </div>
        </fieldset>
      </div>
<!-- end 环检信息  -->

<!-- 维修项目  -->
    <div class="item hauto ld">
        <fieldset>
        <legend>维修项目</legend>
        <div class="fd-content">
            <div class="fd-item">
                <span class="name"></span>
                <span class="value">
                    <el-button type="primary" @click="addFitItemClick()">新增</el-button>
                </span>
            </div>
            <div class="fd-item">
                <el-table v-loading="fitinfo.listLoading" :data="fitinfo.list" 
                    border fit highlight-current-row stripe 
                    style="width: 100%">
                    <el-table-column align="center" label="序" width="80">
                        <template slot-scope="scope">
                        <span>{{ scope.row._id }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="维修项目名称">
                        <template slot-scope="scope">
                        <span>{{ scope.row.project }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="项目工时">
                        <template slot-scope="scope">
                        <span>{{ scope.row.projecttime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="工时单价">
                        <template slot-scope="scope">
                        <span>{{ scope.row.projecttimeprice }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="工时费用">
                        <template slot-scope="scope">
                        <span>{{ scope.row.timemoney }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="子账类">
                        <template slot-scope="scope">
                        <span>{{ scope.row.subaccountcategory }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="费用部门">
                        <template slot-scope="scope">
                        <span>{{ scope.row.paydepart }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="折扣率">
                        <template slot-scope="scope">
                        <span>{{ scope.row.discount }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="折让金额">
                        <template slot-scope="scope">
                        <span>{{ scope.row.discountmoney }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="应收金额">
                        <template slot-scope="scope">
                        <span>{{ scope.row.paymoney }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="维修班组">
                        <template slot-scope="scope">
                        <span>{{ scope.row.fitgroup }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="增项">
                        <template slot-scope="scope">
                        <span>{{ scope.row.addtion }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="录入员">
                        <template slot-scope="scope">
                        <span>{{ scope.row.addtionparson }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="small" style="" @click="fitinfoRowEditClick(scope.row.id)">编辑</el-button>
                            <el-button type="danger" size="small" style="margin-left:5px;" @click="fitinfoRowDeleteClick(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
            
            <div class="fd-item">
                <span class="name">配件数量合计：</span>
                <span class="value">
                    {{totalpartscount}}
                </span>
                <span class="name">金额合计：</span>
                <span class="value">
                    {{totalmoney}}
                </span>
            </div>
            <div class="fd-item">
                <span class="name">折让合计：</span>
                <span class="value">
                    {{totaldiscount}}
                </span>
                <span class="name">应收合计：</span>
                <span class="value">
                    {{totalpaymoney}}
                </span>
            </div>
            
        </div>
        </fieldset>
    </div>
<!-- end 维修项目  -->

<!-- 配件信息 -->
    <div class="item hauto ld">
        <fieldset>
        <legend>配件信息</legend>
        <div class="fd-content">
            <div class="fd-item">
                <span class="name"></span>
                <span class="value">
                    <el-button type="primary" @click="addPartsItemClick()">新增</el-button>
                </span>
            </div>
            <div class="fd-item">
                <el-table v-loading="partsinfo.listLoading" :data="partsinfo.list" 
                    border fit highlight-current-row stripe 
                    style="width: 100%">
                    <el-table-column align="center" label="序" width="80">
                        <template slot-scope="scope">
                        <span>{{ scope.row._id }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="配件名称">
                        <template slot-scope="scope">
                        <span>{{ scope.row.partname }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="配件编码">
                        <template slot-scope="scope">
                        <span>{{ scope.row.partcode }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="单价">
                        <template slot-scope="scope">
                        <span>{{ scope.row.partprice }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="数量">
                        <template slot-scope="scope">
                        <span>{{ scope.row.partcount }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="金额">
                        <template slot-scope="scope">
                        <span>{{ scope.row.totalmoney }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="子账类">
                        <template slot-scope="scope">
                        <span>{{ scope.row.subaccountcategory }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="费用部门">
                        <template slot-scope="scope">
                        <span>{{ scope.row.paydepart }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="折扣率">
                        <template slot-scope="scope">
                        <span>{{ scope.row.discount }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="折让金额">
                        <template slot-scope="scope">
                        <span>{{ scope.row.discountmoney }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="应收金额">
                        <template slot-scope="scope">
                        <span>{{ scope.row.paymoney }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="增项">
                        <template slot-scope="scope">
                        <span>{{ scope.row.addtion }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="录入员">
                        <template slot-scope="scope">
                        <span>{{ scope.row.addtionparson }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="small" style="" @click="fitinfoRowEditClick(scope.row.id)">编辑</el-button>
                            <el-button type="danger" size="small" style="margin-left:5px;" @click="fitinfoRowDeleteClick(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
            
            <div class="fd-item">
                <span class="name">配件数量合计：</span>
                <span class="value">
                    {{totalpartscount}}
                </span>
                <span class="name">金额合计：</span>
                <span class="value">
                    {{totalmoney}}
                </span>
            </div>
            <div class="fd-item">
                <span class="name">折让合计：</span>
                <span class="value">
                    {{totaldiscount}}
                </span>
                <span class="name">应收合计：</span>
                <span class="value">
                    {{totalpaymoney}}
                </span>
            </div>
            
        </div>
        </fieldset>
    </div>
<!-- end 配件信息 -->


<!-- 精品信息 -->
    <div class="item hauto ld">
        <fieldset>
        <legend>精品信息</legend>
        <div class="fd-content">
            <div class="fd-item">
                <span class="name"></span>
                <span class="value">
                    <el-button type="primary" @click="addBoutiqueItemClick()">新增</el-button>
                </span>
            </div>
            <div class="fd-item">
                <el-table v-loading="boutiqueinfo.listLoading" :data="boutiqueinfo.list" 
                    border fit highlight-current-row stripe 
                    style="width: 100%">
                    <el-table-column align="center" label="序" width="80">
                        <template slot-scope="scope">
                        <span>{{ scope.row._id }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="精品名称">
                        <template slot-scope="scope">
                        <span>{{ scope.row.partname }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="精品编码">
                        <template slot-scope="scope">
                        <span>{{ scope.row.partcode }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="单价">
                        <template slot-scope="scope">
                        <span>{{ scope.row.partprice }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="数量">
                        <template slot-scope="scope">
                        <span>{{ scope.row.partcount }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="金额">
                        <template slot-scope="scope">
                        <span>{{ scope.row.totalmoney }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="子账类">
                        <template slot-scope="scope">
                        <span>{{ scope.row.subaccountcategory }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="费用部门">
                        <template slot-scope="scope">
                        <span>{{ scope.row.paydepart }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="折扣率">
                        <template slot-scope="scope">
                        <span>{{ scope.row.discount }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="折让金额">
                        <template slot-scope="scope">
                        <span>{{ scope.row.discountmoney }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="应收金额">
                        <template slot-scope="scope">
                        <span>{{ scope.row.paymoney }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="增项">
                        <template slot-scope="scope">
                        <span>{{ scope.row.addtion }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="录入员">
                        <template slot-scope="scope">
                        <span>{{ scope.row.addtionparson }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="small" style="" @click="fitinfoRowEditClick(scope.row.id)">编辑</el-button>
                            <el-button type="danger" size="small" style="margin-left:5px;" @click="fitinfoRowDeleteClick(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
            
            <div class="fd-item">
                <span class="name">精品数量合计：</span>
                <span class="value">
                    {{totalpartscount}}
                </span>
                <span class="name">金额合计：</span>
                <span class="value">
                    {{totalmoney}}
                </span>
            </div>
            <div class="fd-item">
                <span class="name">折让合计：</span>
                <span class="value">
                    {{totaldiscount}}
                </span>
                <span class="name">应收合计：</span>
                <span class="value">
                    {{totalpaymoney}}
                </span>
            </div>
            
        </div>
        </fieldset>
    </div>
<!-- end 精品信息 -->

<!-- 附加项目 -->
    <div class="item hauto ld">
        <fieldset>
        <legend>附加项目</legend>
        <div class="fd-content">
            <div class="fd-item">
                <span class="name"></span>
                <span class="value">
                    <el-button type="primary" @click="addExtraItemClick()">新增</el-button>
                </span>
            </div>
            <div class="fd-item">
                <el-table v-loading="extrainfo.listLoading" :data="extrainfo.list" 
                    border fit highlight-current-row stripe 
                    style="width: 100%">
                    <el-table-column align="center" label="序" width="80">
                        <template slot-scope="scope">
                        <span>{{ scope.row._id }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="附加项目名称">
                        <template slot-scope="scope">
                        <span>{{ scope.row.partname }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="类型">
                        <template slot-scope="scope">
                        <span>{{ scope.row.partcode }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="数量">
                        <template slot-scope="scope">
                        <span>{{ scope.row.partcount }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="金额">
                        <template slot-scope="scope">
                        <span>{{ scope.row.totalmoney }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="子账类">
                        <template slot-scope="scope">
                        <span>{{ scope.row.subaccountcategory }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="费用部门">
                        <template slot-scope="scope">
                        <span>{{ scope.row.paydepart }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="应收金额">
                        <template slot-scope="scope">
                        <span>{{ scope.row.paymoney }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="备注">
                        <template slot-scope="scope">
                        <span>{{ scope.row.addtion }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="录入员">
                        <template slot-scope="scope">
                        <span>{{ scope.row.addtionparson }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="small" style="" @click="fitinfoRowEditClick(scope.row.id)">编辑</el-button>
                            <el-button type="danger" size="small" style="margin-left:5px;" @click="fitinfoRowDeleteClick(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
            
            <div class="fd-item">
                <span class="name">附加项目数：</span>
                <span class="value">
                    {{totalpartscount}}
                </span>
                <span class="name">金额合计：</span>
                <span class="value">
                    {{totalmoney}}
                </span>
            </div>
            <div class="fd-item">
                <span class="name">折让合计：</span>
                <span class="value">
                    {{totaldiscount}}
                </span>
                <span class="name">应收合计：</span>
                <span class="value">
                    {{totalpaymoney}}
                </span>
            </div>
            
        </div>
        </fieldset>
    </div>
<!-- end 附加项目 -->

<!-- 费用汇总 -->
    <div class="item hauto ld">
        <fieldset>
        <legend>费用汇总</legend>
        <div class="fd-content">
            
            <div class="fd-item">
                <span class="name">金额合计：</span>
                <span class="value">
                    {{totalmoney}}
                </span>
                <span class="name">内部挂账：</span>
                <span class="value">
                    {{totalmoney}}
                </span>
            </div>
            <div class="fd-item">
                <span class="name">折让合计：</span>
                <span class="value">
                    {{totaldiscount}}
                </span>
                <span class="name">应收合计：</span>
                <span class="value">
                    {{totalpaymoney}}
                </span>
            </div>
            <div class="fd-item">
                <span class="name">其他（成本支出）：</span>
                <span class="value">
                    {{totaldiscount}}
                </span>
            </div>
            
        </div>
        </fieldset>
    </div>
<!-- end 费用汇总 -->

      <div class="item" style="text-align:right; padding-right:10px;">
          <el-button type="primary" @click="tempSaveClick()">暂时保存</el-button>
          <el-button type="danger" @click="confirmClick()" style="margin-left:10px;">确认并下施工单</el-button>
      </div>


    <!-- 新增维修项目 -->
<el-dialog :title="dialogFitItem.title" :visible.sync="dialogFitItem.visible"  width="700px">
    <div class="ci">
        
        <div class="item">
            <span class="name required">选择项目名称：</span>
            <span class="value">
                <el-select v-model="dialogFitItem.data.project" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.fittype"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </div>
        <div class="item">
            <span class="name required">工时费用：</span>
            <span class="value">
                <el-input v-model="dialogFitItem.data.fee" disabled style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">折扣率：</span>
            <span class="value">
                <el-input v-model="dialogFitItem.data.discount" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">应收金额：</span>
            <span class="value">
                <el-input v-model="dialogFitItem.data.paymoney" disabled style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">子账类：</span>
            <span class="value">
                <el-select v-model="dialogFitItem.data.subaccountcategory" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.fittype"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </div>
        <div class="item">
            <span class="name required">维修班组：</span>
            <span class="value">
                <el-select v-model="dialogFitItem.data.fitgroup" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.fittype"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </div>
        <div class="item">
            <span class="name required">费用部门：</span>
            <span class="value">
                <el-input v-model="dialogFitItem.data.paydepart" disabled style="width:220px;"></el-input>
            </span>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="dialogFitItem.visible = false">关 闭</el-button>
        <el-button  type="primary" @click="dialogFitItem.visible = false">保 存</el-button>
        
    </div>
</el-dialog>
<!-- end 新增维修项目 -->

<!-- 新增配件信息 -->
<el-dialog :title="dialogPartsItem.title" :visible.sync="dialogPartsItem.visible"  width="700px">
    <div class="ci">
        <div class="item">
            <span class="name required">选择配件：</span>
            <span class="value">
                <el-select v-model="dialogPartsItem.data.partsname" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.fittype"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </div>
        <div class="item">
            <span class="name required">单价：</span>
            <span class="value">
                <el-input v-model="dialogPartsItem.data.partsprice" disabled style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">库存：</span>
            <span class="value">
                <el-input v-model="dialogPartsItem.data.stock" disabled style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">数量：</span>
            <span class="value">
                <el-input type="number" v-model="dialogPartsItem.data.partscount" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">折扣率：</span>
            <span class="value">
                <el-input v-model="dialogPartsItem.data.discount" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">应收金额：</span>
            <span class="value">
                <el-input v-model="dialogPartsItem.data.paymoney" disabled style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">子账类：</span>
            <span class="value">
                <el-select v-model="dialogPartsItem.data.subaccountcategory" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.fittype"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </div>
        <div class="item">
            <span class="name required">费用部门：</span>
            <span class="value">
                <el-input v-model="dialogPartsItem.data.paydepart" disabled style="width:220px;"></el-input>
            </span>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="dialogPartsItem.visible = false">关 闭</el-button>
        <el-button  type="primary" @click="dialogPartsItem.visible = false">保 存</el-button>
        
    </div>
</el-dialog>
<!-- end 新增配件信息 -->



<!-- 新增精品信息 -->
<el-dialog :title="dialogBoutiqueItem.title" :visible.sync="dialogBoutiqueItem.visible"  width="700px">
    <div class="ci">
        <div class="item">
            <span class="name required">选择配件：</span>
            <span class="value">
                <el-select v-model="dialogBoutiqueItem.data.partsname" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.fittype"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </div>
        <div class="item">
            <span class="name required">单价：</span>
            <span class="value">
                <el-input v-model="dialogBoutiqueItem.data.partsprice" disabled style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">库存：</span>
            <span class="value">
                <el-input v-model="dialogBoutiqueItem.data.stock" disabled style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">数量：</span>
            <span class="value">
                <el-input type="number" v-model="dialogBoutiqueItem.data.partscount" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">折扣率：</span>
            <span class="value">
                <el-input v-model="dialogBoutiqueItem.data.discount" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">应收金额：</span>
            <span class="value">
                <el-input v-model="dialogBoutiqueItem.data.paymoney" disabled style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">子账类：</span>
            <span class="value">
                <el-select v-model="dialogBoutiqueItem.data.subaccountcategory" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.fittype"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </div>
        <div class="item">
            <span class="name required">费用部门：</span>
            <span class="value">
                <el-input v-model="dialogBoutiqueItem.data.paydepart" disabled style="width:220px;"></el-input>
            </span>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="dialogBoutiqueItem.visible = false">关 闭</el-button>
        <el-button  type="primary" @click="dialogBoutiqueItem.visible = false">保 存</el-button>
        
    </div>
</el-dialog>
<!-- end 新增精品信息 -->


<!-- 新增额外项目信息 -->
<el-dialog :title="dialogExtraItem.title" :visible.sync="dialogExtraItem.visible"  width="700px">
    <div class="ci">
        <div class="item">
            <span class="name required">选择配件：</span>
            <span class="value">
                <el-select v-model="dialogExtraItem.data.partsname" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.fittype"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </div>
        <div class="item">
            <span class="name required">单价：</span>
            <span class="value">
                <el-input v-model="dialogExtraItem.data.partsprice" disabled style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">库存：</span>
            <span class="value">
                <el-input v-model="dialogExtraItem.data.stock" disabled style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">数量：</span>
            <span class="value">
                <el-input type="number" v-model="dialogExtraItem.data.partscount" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">折扣率：</span>
            <span class="value">
                <el-input v-model="dialogExtraItem.data.discount" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">应收金额：</span>
            <span class="value">
                <el-input v-model="dialogExtraItem.data.paymoney" disabled style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">子账类：</span>
            <span class="value">
                <el-select v-model="dialogExtraItem.data.subaccountcategory" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.fittype"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </div>
        <div class="item">
            <span class="name required">费用部门：</span>
            <span class="value">
                <el-input v-model="dialogExtraItem.data.paydepart" disabled style="width:220px;"></el-input>
            </span>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="dialogExtraItem.visible = false">关 闭</el-button>
        <el-button  type="primary" @click="dialogExtraItem.visible = false">保 存</el-button>
        
    </div>
</el-dialog>
<!-- end 新增精品信息 -->



  </div>
</template>

<script>
import BxAddress from '@/components/BxAddress'
import BxImageBox from '@/components/BxImageBox'
export default {
    components:{
        BxAddress,BxImageBox
    },
    data(){
        return {
            list:null,
            listLoading:false,
            totalpartscount:0,
            totalmoney:0,
            totaldiscount:0,
            totalpaymoney:0,
            selectOptions:{
                ownerType:[
                    {label:'企业',value:'1'},
                    {label:'个人',value:'2'},
                ],
                fittype:[]
            },
            envinfo:{
                mileage:'',
                oilgauge:'',
                faultdesc:'',
                wash:true,
                fittype1:'',
                fittype2:'',
                fitdate:'',
                completedate:'',
                originImages:[],
                images:[]
            },
            fitinfo:{
                list:null,
                listLoading:false,
            },
            partsinfo:{
                list:null,
                listLoading:false,            
            },
            boutiqueinfo:{
                list:null,
                listLoading:false,            
            },
            extrainfo:{
                list:null,
                listLoading:false,            
            },
            
            dialogFitItem:{
                visible:false,
                saveloading:false,
                title:'新增维修项目',
                data:{
                    project:'',
                    fee:'',
                    discount:'',
                    paymoney:'',
                    subaccountcategory:'',
                    fitgroup:'',
                    paydepart:'',
                }
            },
            dialogPartsItem:{
                visible:false,
                saveloading:false,
                title:'新增配件',
                data:{
                    project:'',
                    fee:'',
                    discount:'',
                    paymoney:'',
                    subaccountcategory:'',
                    fitgroup:'',
                    paydepart:'',
                }
            },
            dialogBoutiqueItem:{
                visible:false,
                saveloading:false,
                title:'新增精品',
                data:{
                    project:'',
                    fee:'',
                    discount:'',
                    paymoney:'',
                    subaccountcategory:'',
                    fitgroup:'',
                    paydepart:'',
                }
            },
            dialogExtraItem:{
                visible:false,
                saveloading:false,
                title:'新增附加项目',
                data:{
                    project:'',
                    fee:'',
                    discount:'',
                    paymoney:'',
                    subaccountcategory:'',
                    fitgroup:'',
                    paydepart:'',
                }
            },
            
        }
    },
    created(){

    },
    methods:{
        confirmClick(){

        },
        fitinfoRowEditClick(id){

        },
        fitinfoRowDeleteClick(id){

        },
        addFitItemClick(){
            this.dialogFitItem.visible=true;
        },
        addPartsItemClick(){
            this.dialogPartsItem.visible=true;
        },
        addBoutiqueItemClick(){
            this.dialogBoutiqueItem.visible=true;
        },
        addExtraItemClick(){
            this.dialogExtraItem.visible=true;
        }
    }
}
</script>

<style scoped>
  .item.ld{
        padding:5px 10px;margin-bottom:20px;
    }
   .item.ld>fieldset{
        width:100%;
    }
    .fd-content>.fd-item{
        padding:5px 10px; display: flex; 
    }
    .fd-content>.fd-item>span.name{
        width:100px; display: flex; align-items: center;
        color:#999;
    }
    .fd-content>.fd-item>span.value{
        width:300px; display: flex; align-items: center;
    }
    .fd-content>.fd-item>span.name:nth-child(3){
        margin-left:20px;
    }
</style>